<template>
  <div id="app">
    <el-dialog>
        <template v-slot:title>
            <span>图标</span>
            title
        </template>
        <template v-slot:default>
            <input type="text" placeholder="username">
           <img src="./assets/logo.png" alt="">
        </template>
    </el-dialog>
    <todo :list="list">
        <template v-slot="{test}">
            <div>
                {{test.isDone?'图标':''}}
                {{test.text}}
            </div>
        </template>
    </todo>
    <button @click="address='北京市-海淀区'">change</button>
    {{privice}}
    {{city}}
  </div>
</template>

<script>
import elDialog from './components/dialog'
import todo from './components/todo'
export default {
    components:{
        elDialog,
        todo
    },
    data(){
        return {
            city:'石家庄',
            privice:'河北省',
            list:[
                {
                    text:"吃早饭",
                    isDone:true
                },
                {
                    text:"吃午饭",
                    isDone:false
                },
                {
                    text:"吃晚饭",
                    isDone:false
                }
            ]
        }
    },
    computed:{
        // address(){
        //     return `${this.privice}-${this.city}`
        // }
        address:{
            get(){
                return `${this.privice}-${this.city}`
            },
            set(value){
                // '北京市-海淀区'
                this.privice = value.split('-')[0];
                this.city = value.split('-')[1];
            }
        }
    },
    watch:{
        // privice(newVal){
        //     this.address = newVal + this.city
        // } 
    }
}
</script>

<style lang="scss">
    
</style>
